<template>
  <view class="container">
    <view class="card-box">
      <text class="custom-title">报价列表</text>
	  <view v-if="quotationList.length === 0" class="empty">
	    <image src="@/static/empty.png"></image>
	  </view>
      <view v-else class="quotation-list">
        <view
          class="quotation-item"
          v-for="(item, index) in quotationList"
          :key="index"
        >
          <view class="baojia">
            <text class="price">报价: {{ item.price }}万</text>
            <text class="guide-price"
              >指导价：{{ item.guide_price }}万丨{{ item.quotation_name }}</text
            >
          </view>
          <view class="deposit">订金{{ item.deposit_price }}元</view>
          <view class="tag-list">
            <view
              class="tag-item"
              v-for="(item, index) in item.label_name"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="user">
            <image class="user-image" :src="item.imageurl" />
            <view>
              <view class="user-name">
                <view>{{ item.users_name }}</view>
                <image :src="item.users_icon" mode="heightFix" />
              </view>
              <view class="timename">注册时长：{{ item.timename }}</view>
            </view>
          </view>
          <view class="quotation-btn">
           <view @click="fankui(item)">反馈</view>
           <view @click="makePhoneCall(item)">电话联系</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 反馈 -->
    <uni-popup ref="complaintPop" type="bottom">
      <view class="complaint">
        <view class="title">反馈</view>
        <view class="list">
          <view
            @click="tagClick(item)"
            class="item"
            :class="{ active: currentTag.id === item.id }"
            v-for="(item, index) in tagList"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <textarea
		:adjust-position="false"
		@blur="keyboardHeight = 0"
		:cursorSpacing="20"
          v-model="otherTag"
          v-if="currentTag.id === 'other'"
          placeholder="请输入更多反馈内容"
        ></textarea>
        <view class="btn" @click="tijiaofankui">提交</view>
      </view>
	      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import {
  newsCarsSearchSupplierQuotationList,
  usedSearchSearchFeedback,
  usedCarSearchQuotationFeedbackAdd
} from "@/api/newCarSerach.js";
export default {
  data() {
    return {
		 keyboardHeight: 0,
		  users_id: uni.getStorageSync("login").id,
      carId: [],
      quotationList: [],
	  // 反馈
	  tagList: [],
	  currentTag: {},
	  otherTag: "",
	  to_users_id: "", //供应商用户id
    };
  },
  onShow() {
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  onLoad(option) {
    this.carId = option.carId;
    this.init();
  },
  methods: {
    init() {
      newsCarsSearchSupplierQuotationList(this.carId).then((res) => {
        this.quotationList = res.data;
      });
      usedSearchSearchFeedback(1).then((res) => {
        this.tagList = res.data || [];
        this.tagList.push({
          name: "其他",
          id: "other",
        });
      });
    },
    // 反馈
    fankui(item) {
      this.to_users_id = item.id;
      this.$refs.complaintPop.open();
    },
    tagClick(item) {
      this.currentTag = item;
    },
    tijiaofankui() {
      if (this.currentTag.id) {
        if (this.currentTag.id === "other" && this.otherTag === "") {
          uni.showToast({
            title: "请输入反馈内容",
            icon: "none",
          });
          return;
        }
        usedCarSearchQuotationFeedbackAdd({
          state: "1",
          quotation_id: this.carId,
          users_id: this.users_id,
          to_users_id: this.to_users_id,
          content:
            this.currentTag.id === "other"
              ? this.otherTag
              : this.currentTag.name,
        }).then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "反馈成功",
              icon: "none",
            });
          }
          // this.init();
          this.$refs.complaintPop.close();
          this.currentTag = {};
          this.otherTag = "";
        });
      } else {
        uni.showToast({
          title: "请选择反馈",
          icon: "none",
        });
      }
    },
	// 电话联系
	makePhoneCall(item) {
	  wx.makePhoneCall({
	    phoneNumber: item.phone,
	    success: function () {
	      // callHistory({
	      //   vehicle_source: 3,
	      //   vehicle_source_id: "",
	      //   shop_users_id: "",
	      //   users_id: "",
	      //   phone: "",
	      // });
	    },
	    fail: function () {},
	  });
	},
  },
};
</script>

<style lang="scss" scoped>
.custom-title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #05052a;
  line-height: 18rpx;
  background-image: url(/static/bac-small.png);
  background-size: 90rpx 33rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.container {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  padding-bottom: 180rpx;
  .card-box {
    padding: 28rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
  }
  .tag-list {
    .tag-item {
      margin-top: 29rpx;
      display: inline-block;
      margin-right: 20rpx;
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 36rpx;
      background: #f7f7f7;
      border-radius: 27rpx;
    }
  }

  // 报价列表
  .quotation-list {
    .quotation-item {
      border-bottom: 1rpx solid #f2f2f2;
      &:last-child {
        border-bottom: none;
      }
      .baojia {
        margin-top: 25rpx;
        .price {
          font-size: 40rpx;
          font-weight: 800;
          color: #ec4b4b;
        }
        .guide-price {
          margin-left: 24rpx;
          font-size: 24rpx;
          color: #333333;
        }
      }
      .deposit {
        margin-top: 28rpx;
        font-size: 24rpx;
        color: #333333;
      }
      .user {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        color: #333;
        .user-image {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        .user-name {
          display: flex;
          align-items: center;
          image {
            height: 20rpx;
            margin: 0 15rpx;
          }
        }
        .timename {
          margin-top: 10rpx;
          font-size: 24rpx;
        }
      }
      .quotation-btn {
        margin: 15rpx 0 5rpx;
        gap: 20rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        view {
          padding: 0 50rpx;
          text-align: center;
          box-sizing: border-box;
          height: 50rpx;
          line-height: 50rpx;
          border: 1px solid #999999;
          border-radius: 25rpx;
        }
      }
    }
  }
// 反馈
.complaint {
  background-color: #fff;
  width: 100%;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 30rpx;
  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 800;
  }
  .wfaa {
    margin-top: 40rpx;
  }
  .list {
    display: flex;
    align-items: center;
    gap: 33rpx;
    view {
      margin-top: 29rpx;
      width: 25%;
      box-sizing: border-box;
      font-size: 24rpx;
      text-align: center;
      height: 50rpx;
      line-height: 46rpx;
      border: 1px solid #999999;
      border-radius: 25rpx;
      &.active {
        color: #fff;
        background-color: #0e59ea;
        border-color: #0e59ea;
      }
    }
  }
  textarea {
    width: 100%;
    margin: 40rpx 0 0;
    height: 150rpx;
    background: #f3f3f3;
    border-radius: 14rpx;
    padding: 15rpx 20rpx;
  }
  .btn {
    margin-top: 50rpx;
    flex: 1;
    width: 100%;
    color: #fff;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background: #0e59ea;
    border-radius: 14rpx;
    font-size: 28rpx;
  }
}
}
.empty {
  display: flex;
  justify-content: center;
  padding: 200rpx 0;
  image {
  }
}
</style>
